<template>
  <div class="home">
    <keep-alive include="Index,Video,My">
      <router-view></router-view>
    </keep-alive>
    <van-tabbar
      class="tab-bar"
      route
      :active-color="activeColor"
      :inactive-color="inActiveColor"
      :placeholder="true"
      v-model="active"
      v-if="$route.meta.isNeedTab"
    >
      <van-tabbar-item :to="{ name: 'Index' }">
        <template #default>
          <span>首页</span>
        </template>
        <template #icon>
          <i class="iconfont">&#xe7a7;</i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="{ name: 'Search' }">
        <template #default>
          <span>问答</span>
        </template>
        <template #icon>
          <i class="iconfont">&#xe7b3;</i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="{ name: 'Video' }">
        <template #default>
          <span>视频</span>
        </template>
        <template #icon>
          <i class="iconfont">&#xe75d;</i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="{ name: 'My' }">
        <template #default>
          <span>我的</span>
        </template>
        <template #icon>
          <i class="iconfont">&#xe7d5;</i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      active: 0,
      activeColor: '#3296fa',
      inActiveColor: '#666666'
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.home {
  .tab-bar {
    height: 24.5px;
    background: #ffffff;
    .iconfont {
      font-size: 20px;
    }
  }
}
</style>
